<script setup lang="ts">
import { updateApplicationPermissionBatchApi } from '@/apis/modules/application'
import { Message } from '@arco-design/web-vue'
import { get, set } from 'lodash-es'
import { useDataSource } from './useDataSource'

const {
  record,
  getParams,
  validateState,
  formState,
  allRegionOptions,
  loading,
  options,
} = useDataSource()

function handleSave() {
  updateApplicationPermissionBatchApi({
    ...getParams(),
  }).then(() => {
    Message.success('保存成功')
  })
}
</script>

<template>
  <main-container
    :pagination="false"
    :loading="loading"
    :breadcrumb="record?.name"
  >
    <div class="grid space-y-6">
      <!-- {{ formState }} -->
      <a-card
        v-for="region in allRegionOptions"
        :key="region.value"
        class="region-card"
        :title="region.label"
      >
        <div class="grid border-color-1 divide-y">
          <div
            v-for="item in options(region.value)"
            :key="item.value"
            class="flex items-stretch"
          >
            <label
              class="flex shrink-0 basis-40 items-center border-r px-4 border-color-1 text-color-1"
            >
              {{ item.label }}
            </label>
            <a-checkbox-group
              :model-value="get(formState, [region.value, item.value], [])"
              class="grow flex-wrap gap-4 p-4 !flex"
              @update:model-value="
                (v: string[]) => set(formState, [region.value, item.value], v)
              "
            >
              <a-checkbox
                v-for="option in item.options"
                :key="option"
                :value="option.value"
              >
                {{ option.label }}
              </a-checkbox>
            </a-checkbox-group>
          </div>
        </div>
        <div
          v-if="get(validateState || {}, region.value, '')"
          role="alert"
          class="arco-form-item-message -left-0 -b-bottom-6 absolute text-xs text-color-4"
        >
          {{ get(validateState || {}, region.value, '') }}
        </div>
      </a-card>
      <div>
        <a-button
          type="primary"
          :disabled="validateState"
          @click="handleSave"
        >
          保存
        </a-button>
      </div>
    </div>
  </main-container>
</template>

<style scoped lang="less">
.region-card {
  @apply rounded-lg border-color-1 text-xs relative;

  :deep(.arco-card-header) {
    @apply p-4 border-color-1 bg-fill-1;
    .arco-card-header-title {
      @apply text-sm font-700;
    }
  }

  :deep(.arco-card-body) {
    @apply p-0;
  }
}
</style>
